<docs>
  ## 首页
</docs>
<template>
  <div>
    <mheader class="index" @back_btn="goBack()" title="开具证明服务"></mheader>
    <!-- 申请须知 开始 -->
    <div class="list">
      <div class="title">
        <h3 class="title-h3">申请须知</h3>
        <!-- <p class="title-btn">
          <button class="btn btn-round" @click="materialBtn">材料说明</button>
        </p> -->
      </div>
      <div class="content">
        <ul>
          <li class="c-li c-li1">1申请灵活就业保险补贴前，请确认已参加本市城镇职工社会保险。</li>
          <li class="c-li c-li2">2请确认已办理过就失业证。</li>
          <li class="c-li c-li3">3必须为4050人员（如果不是4050人员，则必须登记失业一年以上）。</li>
          <li class="c-li c-li4">4如果是城镇户籍人员，则必须在劳动人事代理系统以个人身份存档（海淀区不进行人事代理的互动校验）。</li>
          <li class="c-li c-li5">5请确保所填材料的准确性。</li>
        </ul>
      </div>
    </div>
    <!-- 申请须知 结束 -->
    <!-- 通知 开始 -->
    <div class="notice" v-show="noticeVisible" @click="sqList">
      <i class="iconfont icon-notice icon-before"></i>
      <p class="content">{{noticeText}}</p>
      <i class="iconfont icon-arrow icon-after"></i>
    </div>
    <!-- 通知 结束 -->
    <!-- 申请按钮 开始 -->
    <div class="apply">
      <div class="info">
        <div class="info-cont1" >
          <p class="info-cont1-name">{{grxx.xm}}</p>
          <p class="info-cont1-phone">电话：{{grxx.dh}}</p>
        </div>
        <p class="info-cont2">身份证号：{{grxx.sfzhm}}</p>
      </div>
      <div class="apply-btn" @click="reverseBtn">立即申请</div>
    </div>
    <!-- 申请按钮 结束 -->
    <!-- 材料说明 开始 -->
    <!-- <message-card type="info"
    :visible.sync="materialVisible"
    btnText="知道了"
    title="办理业务需携带相关材料说明">
      <dl v-for="(item, index) in ywcl" :key="index" class="material">
        <dd class="m-content">{{ index + 1 }}、{{item.dmmc}}</dd> -->
        <!-- <dl class="m-content" v-for="(sub, i) in item.clmx" :key="i">{{sub.xh + sub.nr}}</dl> -->
      <!-- </dl>
    </message-card> -->
    <!-- 材料说明 结束 -->
    <!-- <help-btn></help-btn> -->
  </div>
</template>
<script>
import Mheader from '@/txry/group/mheader/mheader';
// import MessageCard from '@/txry/components/messageCard/messageCard';
import $ from '@/common/js/axios';
// import HelpBtn from '@/txry/components/helpBtn/helpBtn';

export default {
  components: { Mheader },
  name: 'index',
  data() {
    return {
      visible: false,
      grxx: {
        sfzhm: '',
        xm: '',
        dh: ''
      },
      // 最新申请提示
      noticeVisible: true,
      noticeText: ''
      // 材料说明
      // materialVisible: false,
      // ywcl: []
    };
  },
  methods: {
    goBack(){
      this.$router.go(-1);
    },
    // 基本信息查询
    // GET_baseInfo() {
    //   $.get('/sq/jbxxCx').then((res) => {
    //     const data = res.returnData;
    //     this.grxx = data.grxx;
    //     // this.pzcs = data.pzcs;
    //     // this.$emit('update:info', this.pzcs);
    //   }).catch(() => {});
    // },

    // 最近申请信息查询
    // GET_reserve() {
    //   $.get('/lhsq/zjsqCx').then((res) => {
    //     const data = res.returnData;
    //     this.noticeVisible = parseInt(data.executeResult, 10) === 1;
    //     if(data.zjsq==""){
    //       this.noticeText = "暂无申请记录"
    //     }else{
    //       this.noticeText = data.zjsq;
    //     }
    //   }).catch(() => {});
    // },
    // 申请记录页面跳转
    sqList(){
      this.$router.push({ name: 'search' })
      // if(this.noticeText != "暂无申请记录"){
      // }
    },
    // 检查按钮是否可用
    reverseBtn() {
      this.$router.push({ name: 'reverseOne' });
      // $.get('/lhsq/sqCheck').then((res) => {
      //   const flag = parseInt(res.returnData.executeResult, 10);
      //   if (flag === 1) {
      //     this.$confirm('本人承诺填写信息真实有效，如有虚假填报，本人愿承担一切后果。', '承诺书', {
      //       cancleBtnText: '取消',
      //       confirmBtnText: '确认'
      //     }).then(() => {
      //       this.$router.push({ name: 'reverseOne' });
      //     }).catch(() => {});
      //   } else {
      //     this.$alert({
      //       type: 'warning',
      //       message: res.returnData.message
      //     });
      //   }
      // }).catch(() => {});
    }
    // 获取材料说明信息
    // GET_material() {
    //   return $.get('/sq/clsmCx').then((res) => {
    //     this.ywcl = res.returnData.ywcl;
    //     return res;
    //   }).catch(() => {});
    // },
    // 材料说明点击按钮
    // materialBtn() {
    //   if (this.ywcl.length > 0) {
    //     this.materialVisible = true;
    //     return;
    //   }
    //   this.GET_material().then((res) => {
    //     if (parseInt(res.returnData.executeResult, 10) === 1) {
    //       this.materialVisible = true;
    //     }
    //   }).catch(() => {});
    // }
  },
  created() {
    // this.GET_baseInfo();
    // this.GET_reserve();
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/variable.scss';

//竖屏  CSS
@media screen and (orientation: portrait) {
  .index {
    position: relative;
    // height: 100vh;
    width: 100vw;
  }
  .apply {
    // position: absolute;
    bottom: 0;
  }
}
@media screen and (orientation: landscape) {

//横CSS

}
// 申请须知
.list {
  margin-top: $margin-base;
  border: $border;
  background-color: #fff;
  .title {
    display: flex;
    padding: 28px 48px;
    border-bottom: $border;
  }
  .title-h3 {
    font-size: $font-size-large;
    color: $color-text-title;
    flex: 1 1 auto;
    line-height: 80px;
  }
  .btn-round {
    font-size: $font-size-small;
    padding: 28px 36px;
  }
  .content {
    padding: 36px 48px;
    // line-height: 64px;
    .c-li {
      line-height: 1.6;
      padding: 15px 0 15px 90px;
    }
    @for $num from 0 to 5 {
      .c-li#{$num + 1} {
        background: url('~imgs/icon.png') 0 (15px - $num * 185px) no-repeat;
        background-size: 60px auto;
      }
    }
  }
}
// 消息提示
.notice {
  padding: 36px 48px;
  // margin-bottom: 240px + $margin-base;
  margin-bottom: $margin-base;
  background-color: #fff;
  border: $border;
  margin-top: $margin-base;
  display: flex;
  align-items: center;
  position: relative;
  .iconfont {
    font-size: 48px * 1.5;
  }
  .icon-before {
    color: $color-base;
  }
  .icon-after {
    color: $color-text-label;
  }
  .content {
    flex: 1 1 auto;
    padding: 0 30px;
    line-height: 1.5;
  }
}
// 申请按钮
.apply {
  bottom: 0;
  position: fixed;
  display: flex;
  width: $width-100;
  margin-top: $margin-base;
  line-height: 1.5;
  .info-cont1 {
    display: flex;
    line-height: 2;
    padding-bottom: $padding-base-half;
    align-items: center;
  }
  .info-cont1-name {
    flex: 1 1 50%;
    font-size: $font-size-large;
    color: $color-text-title;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .info-cont1-phone {
    flex: 1 0 65%;
    text-align: right;
    font-size: $font-size-base;
  }
  .info-cont2 {
    font-size: $font-size-base;
  }
  .info {
    width: 66.666667%;
    border: $border;
    border-right: 0;
    background-color: #fff;
    padding: $padding-base/2 $padding-base/2;
  }
  .apply-btn {
    width: 33.3333333%;
    background-color: $color-base;
    text-align: center;
    color: #fff;
    height: 240px;
    font-size: $font-size-large;
    line-height: 240px;
  }
}
// messagebox
.material {
  line-height: 1.5;
  .m-title {
    color: $color-base;
    line-height: 2;
  }
  .m-content{
    color: $color-text-primary;
  }
}
</style>
